import React, { useState } from 'react';
import { View, Input, Button } from '@tarojs/components';
import Taro from '@tarojs/taro';
import './index.scss';

const Login = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = () => {
    if (!username.trim() || !password.trim()) {
      Taro.showToast({
        title: '请输入账号和密码',
        icon: 'none'
      });
      return;
    }
    // 登录成功后保存token FIXME: 这里随机一个token 本地调试用
    Taro.setStorageSync('token', Math.random().toString());
    // 返回上一页
    Taro.navigateBack();
  };

  return (
    <View className='login-container'>
      <View className='login-box'>
        <View className='login-title'>欢迎登录</View>
        
        <View className='input-group'>
          <Input
            className='input-item'
            type='text'
            placeholder='请输入账号'
            value={username}
            onInput={e => setUsername(e.detail.value)}
          />
          <Input
            className='input-item'
            type={'password' as any}
            placeholder='请输入密码'
            value={password}
            onInput={e => setPassword(e.detail.value)}
          />
        </View>

        <Button 
          className='login-button' 
          onClick={handleLogin}
        >
          登录
        </Button>
      </View>
    </View>
  );
};

export default Login;